<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<!--在HTML5中表单升级为智能表单，可以自动补全之前输入过的信息-->
<!--表单请求方式为get和post，
如果请求方式为get请求，那么表单中收集的数据将会以字符串形式拼接在url地址后面；
如果请求方式为post请求，那么表单中收集的数据将会以字符串形式或数据流的形式存储与请求体中；
具体是以数据流还是字符串形式存储，取决于表单中enctype属性值，
如果是application/x-www-form-urlencoded，那么将会以字符串形式存储，
如果是multipart/form-data，那么将会以数据流的形式存储；-->
<form action="/" method="get">
    <!--align属性只能设置水平方向的居中-->
    <table border="1" align="center">
        <tr>
            <td>用户名</td>
            <td>
                <label>
                    <input type="text" name="username">
                </label>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>Email</td>
            <td>
                <input type="email" name="email">
            </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>
                <input type="text" name="realname">
            </td>
        </tr>
        <tr>
            <td>手机号</td>
            <td>
                <!--type="tel"用于输入手机号，会自动补全之前输入过的手机号-->
                <input type="tel" name="phone">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <input type="date" name="birthday">
            </td>
        </tr>
        <tr>
            <td>验证码</td>
            <td>
                <input type="text" name="verifycode">
                <img src="/resource/verify_code.jpg" alt="验证码" width="68">
            </td>
        </tr>
        <tr>
            <td>所在省份</td>
            <td>
                <label>
                    <!--需要从已有的数据中进行选择，那么可以使用select标签-->
                    <select name="province">
                        <!--select标签内部通过option标签表示一个选项-->
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广东">广东</option>
                        <option value="浙江">浙江</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <!--按钮的类型有三种：submit(提交表单数据)、reset(清空表单数据)、
                button(普通按钮，没有任何效果，如果需要指定效果，那么需要通过JS语言设置)-->
                <button type="submit">注册</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>